Halftone

Halftone started as a question: how close can a browser get to the look of a photograph printed on newsprint, in real time, without a single image round-trip?

Closer than I expected. The answer is a fragment shader, a rotated dot grid per channel, and a great deal of fiddling with the angle between the screens to avoid moiré.

The interesting part

Print halftones rotate each ink's dot grid to a different angle — traditionally fifteen, seventy-five, zero, and forty-five degrees — precisely so that the patterns do not interfere. Reproduce those angles and the result reads as printed. Get them wrong by three degrees and you get a rosette pattern crawling across the image, which is either a bug or the entire point, depending on the afternoon.

Every reproduction technology has a signature. The signature is what makes it feel like a thing rather than a picture of a thing.

Where it went

It became a tool I use constantly for making textures, and a demo I use to explain to designers why the GPU is not scary. The whole thing is about two hundred lines, most of which are the controls.